<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>考勤管理</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<!-- <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" /> -->
	<style>
		html,
		body {
			background-color: #f5f6f6;
		}

		.empty {
			margin-left: auto;
			margin-right: auto;
			width: 98%;
		}

		.doufu {
			margin-top: 5px;
		}

		.doufu li {
			width: 50%;
			float: left;
		}

		.doufu li div {
			margin: 5px;
			background-color: #fff;
			padding: 10px;
		}

		.shu {
			text-align: center;
			font-size: 22px;
			line-height: 30px;
			height: 30px;
			color: #1abc9c;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 33.3%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all 0.3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #f5f6f6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all 0.3s;
		}

		ul li .content table {
			width: 100%;
		}

		ul li .content td {
			border-bottom: 1px solid #dfe0e0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 20px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555;
		}

		ul li:nth-child(1) .content {
			background-color: #f5f6f6;
		}

		ul li:nth-child(2) .content {
			background-color: #f5f6f6;
		}

		/* ul li:nth-child(3) .content {
			 background-color: #f5f6f6;
			 } */
		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1abc9c;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc;
		}

		.clickfont {
			color: #72edd1;
		}

		.s {
			font-size: 10px;
			text-align: center;
		}

		.aa {
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab {
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}

		.ab span {
			margin-left: 30px;
			font-size: 16px
		}

		.select {
			display: inline-block;
			width: 100%;
			position: relative;
			vertical-align: middle;
			padding: 0;
			overflow: hidden;
			background-color: #fff;
			color: #555;
			border: 1px solid #aaa;
			text-shadow: none;
			border-radius: 4px;
			transition: box-shadow 0.25s ease;
			z-index: 2;
		}

		.select:hover {
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
		}

		.select:before {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-top-color: #ccc;
			top: 14px;
			right: 10px;
			cursor: pointer;
			z-index: -2;
		}

		.select select {
			cursor: pointer;
			padding: 10px;
			width: 100%;
			border: none;
			background: transparent;
			background-image: none;
			-webkit-appearance: none;
			-moz-appearance: none;
		}

		.select select:focus {
			outline: none;
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<input id="tab1" type="radio" name="tab" checked onclick="plants()" />
			<label for="tab1">考勤列表</label>

			<div class="content" id="qqq">
				<div v-for="(todo, index) in todos"
					style="background-color: rgb(240,239,244);margin-top: 10px;height: 115px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/gzjh.png"
							style="width:20px;height: auto;margin-top: 5px;margin-left: 10px" />
					</div>
					<div class="aa">
						<span style="margin-top: 3px;margin-left:5px;font-size: 13px">{{todo.a_createDate}}</span>
					</div>
					<div class="aa" style="text-align: right;" v-on:click="addAtt(todo.id)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情 ></span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">施工队伍：{{todo.a_name}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">应到人数：{{todo.a_should_num}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">实到人数：{{todo.a_pm_num}}</span>
					</div>
				</div>
			</div>
		</li>
		<li>
			<input id="tab2" onclick="plant()" type="radio" name="tab" />
			<label for="tab2">考勤统计</label>
			<div class="content">
				<div class="panel-body" style="background-color: #fff;">
					<div class="select" id="demo">
						<select name="" id="teamId1">
							<option value="">请选择施工队</option>
						</select>
					</div>
					<table class="table table-striped table-bordered table-hover" id="tableMonth"
						style="margin-top: 20px;">
						<thead>
							<tr>
								<th class="s"><i class></i> 考勤日期</th>
								<th class="s"><i class></i> 应到人数</th>
								<th class="s"><i class></i> 实到人数</th>
								<th class="s"><i class></i> 缺勤人数</th>
								<th class="s"><i class></i> &nbsp;状态</th>
								<th class="s"><i class></i> 队伍名称</th>
							</tr>
						</thead>
						<tbody id="ld">
							<tr v-for="(l,index) in ld">
								<td v-text="l.a_createDate" style="text-align: center;"></td>
								<td v-text="l.a_should_num" style="text-align: center;"></td>
								<td v-if=" l.a_pm_num==null||l.a_pm_num==''">
									<p style='color: orange;text-align: center'>
										下午未考勤
									</p>
								</td>
								<td v-if=" l.a_pm_num!==null||l.a_pm_num!==''">
									<p v-text=" l.a_pm_num" style="text-align: center;"></p>
								</td>
								<td v-text="l.a_abs_num" style="text-align: center;"></td>
								<td v-if="l.a_absence==1">
									<p style='color: red;text-align: center;'>
										缺勤
									</p>
								</td>
								<td v-if="l.a_absence==0">
									<p style='color: green;text-align: center'>
										满勤
									</p>
								</td>
								<td v-text="l.a_name" style="text-align: center;"></td>
							</tr>
						</tbody>
					</table>
					<!-- 本月出勤人数统计 -->
					<div id="container" style="height: 200px; width: 100%; float: left;"></div>
				</div>
			</div>
		</li>
		<li>
			<input id="tab3" onclick="monthCount()" type="radio" name="tab" />
			<label for="tab3">考勤月平均值统计</label>
			<div class="content" id="avg">
				<div class="panel-body" style="background-color: #fff;">
					<div class="select">
						<select name="" id="teamId2">
							<option value="">请选择施工队</option>
						</select>
					</div>
					<!-- 本月出勤人数统计 -->
					<div id="container1" style="height: 200px; width: 100%;margin-top: 20px;"></div>
				</div>
			</div>
		</li>
	</ul>
</body>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script src="../../script/echarts.min.js"></script>
<script type="text/javascript">
	apiready = function () {
		api.setRefreshHeaderInfo({
			visible: true,
			bgColor: "rgba(0,0,0,0)",
			textColor: "#666",
			textDown: "下拉刷新",
			textUp: "释放刷新",
		},
			function (ret, err) {
				window.location.reload();
				api.refreshHeaderLoadDone();
			}
		);
		var areaId = $api.getStorage("selectpor").id;
		var userSession = $api.getStorage("userSession");
		var proId = $api.getStorage("userSession").data.proId;
		var enterpriseId = userSession.data.enterprise.id;
		var roleId = userSession.data.sysRole.sysRoleCode.id;
		api.showProgress({
			title: '拼命加载中...',
			modal: false
		});
		//考勤逐日统计 页面
		var vm = new Vue({
			el: "#ld",
			data: {
				ld: [],
			},
			created: function () {
				$.ajax({
					type: "post",
					url: BaseServiceUrl + "mobile/attendanceAdmin/findAllCount.json",
					data: {
						e_id: enterpriseId, //企业ID
						area_id: areaId,
						role_id: roleId,
						// starttime: startTime,
						// a_name: selectTeam
					},
					async: true,
					dataType: "json", //返回数据形式为json
					success: function (result) {
						// alert(JSON.stringify(result))
						for (var i = 0; i < result.data.length; i++) {
							vm.ld.push(result.data[i]);
						}
						api.hideProgress();
					},
				});
			},
		});
		//考勤查看列表
		var app = new Vue({
			el: "#qqq",
			data: {
				todos: [],
			},
			created: function () {
				//管理角色
				$.ajax({
					url: BaseServiceUrl + "mobile/attendanceAdmin/findAll.json",
					type: "POST",
					data: {
						enterpriseId: enterpriseId, //企业ID
						areaId: areaId,
						role_id: roleId,
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							app.todos.push(result.data[i]);
						}
						api.hideProgress();
					},
				});
			},
			methods: {
				addAtt: function (id) {
					if (roleId === 3 || roleId === 2) {
						api.openWin({
							name: "wss",
							url: "attr_view_win.html",
							rect: {
								x: 0,
								y: 0,
								w: "auto",
								h: "auto",
							},
							pageParam: {
								id: id,
							}, //传递参数
							bounces: true,
							delay: 200,
						});
					} else {
						api.openWin({
							name: "wss",
							url: "attr_view_win.html",
							rect: {
								x: 0,
								y: 0,
								w: "auto",
								h: "auto",
							},
							pageParam: {
								id: id,
							}, //传递参数
							bounces: true,
							delay: 200,
						});
					}
				},
			},
		});
	};
	function monthCount() {
		$("#avg").show()
		var userSession = $api.getStorage("userSession");
		var proId = $api.getStorage("userSession").data.proId;
		var enterpriseId = userSession.data.enterprise.id;
		var roleId = userSession.data.sysRole.sysRoleCode.id;
		//考勤统计
		var areaId = $api.getStorage("selectpor").id;
		$.ajax({
			url: BaseServiceUrl + "mobile/attendanceAdmin/statisMon.json",
			type: "POST",
			data: {
				role_id: roleId,
				e_id: enterpriseId,
				project_id: proId,
				area_id: areaId,
			},
			async: true,
			dataType: "json",
			success: function (data) {
				// $("#team_name").text(data.name);
				let worklist = [];
				for (var i = 0; i < data.worklist.length; i++) {
					worklist.push(data.worklist[i]);
				}
				var dom = document.getElementById("container1");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = "xxxxx";
				option = {
					color: ["#3398DB"],
					title: {
						text: "人数月度平均值统计",
						left: "center",
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					xAxis: [
						{
							type: "category",
							data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
							axisTick: {
								alignWithLabel: true,
							},
						},
					],
					yAxis: [
						{
							type: "value",
						},
					],
					series: [
						{
							name: "月平均出勤人数",
							type: "bar",
							barWidth: "60%",
							data: worklist,
						},
					],
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}
		});
		$('#teamId2').change(function () {
			var selectTeam = $("#teamId2").val();
			$.ajax({
				url: BaseServiceUrl + "mobile/attendanceAdmin/statisMon.json",
				type: "POST",
				data: {
					role_id: roleId,
					e_id: enterpriseId,
					project_id: proId,
					area_id: areaId,
					// starttime: dataTime,
					a_name: selectTeam
				},
				async: true,
				dataType: "json",
				success: function (data) {
					// $("#team_name").text(data.name);
					let worklist = [];
					for (var i = 0; i < data.worklist.length; i++) {
						worklist.push(data.worklist[i]);
					}
					var dom = document.getElementById("container1");
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					app.title = "xxxxx";
					option = {
						color: ["#3398DB"],
						title: {
							text: "人数月度平均值统计",
							left: "center",
						},
						tooltip: {
							trigger: "axis",
							axisPointer: {
								// 坐标轴指示器，坐标轴触发有效
								type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
							},
						},
						grid: {
							left: "3%",
							right: "4%",
							bottom: "3%",
							containLabel: true,
						},
						xAxis: [
							{
								type: "category",
								data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
								axisTick: {
									alignWithLabel: true,
								},
							},
						],
						yAxis: [
							{
								type: "value",
							},
						],
						series: [
							{
								name: "月平均出勤人数",
								type: "bar",
								barWidth: "60%",
								data: worklist,
							},
						],
					};
					if (option && typeof option === "object") {
						myChart.setOption(option, true);
					}
				}
			});
		})
	}
	function plants() {
		$("#qqq").show();
	}
	function plant() {
		$("#avg").hide()
		var userSession = $api.getStorage("userSession");
		var proId = $api.getStorage("userSession").data.proId;
		var enterpriseId = userSession.data.enterprise.id;
		var roleId = userSession.data.sysRole.sysRoleCode.id;
		//考勤统计
		var areaId = $api.getStorage("selectpor").id;
		$.ajax({
			url: BaseServiceUrl + "mobile/attendanceCon/findAreaTeam.json",
			type: "POST",
			data: {
				eid: enterpriseId,
				roleid: roleId,
				areaid: areaId
			},
			dataType: "json",
			success: function (result) {
				// alert(JSON.stringify(result))
				var v = result.data;
				var select = document.getElementById("teamId1");
				for (var i = 0; i < v.length; i++) {
					var opt = document.createElement("option");
					// 设置option元素的内容，内容为传入的数组内容
					opt.innerText = v[i].t_name;
					opt.value = v[i].t_name;
					// 把option添加到select中
					select.appendChild(opt);
				}
				var select2 = document.getElementById("teamId2");
				for (var i = 0; i < v.length; i++) {
					var opt = document.createElement("option");
					// 设置option元素的内容，内容为传入的数组内容
					opt.innerText = v[i].t_name;
					opt.value = v[i].t_name;
					// 把option添加到select中
					select2.appendChild(opt);
				}
			}
		});
		// var select = document.getElementById("dataTime");
		// for (var i = 2020; i < 2099; i++) {
		//   var opt = document.createElement("option");
		//   // 设置option元素的内容，内容为传入的数组内容
		//   opt.innerText = i;
		//   opt.value = i;
		//   // 把option添加到select中
		//   select.appendChild(opt);
		// }
		//管理角色
		$.ajax({
			type: "post",
			async: false, //同步执行
			url: BaseServiceUrl + "mobile/attendanceCon/statis.json",
			data: {
				e_id: enterpriseId, //企业ID
				area_id: areaId,
				role_id: roleId,
			},
			dataType: "json", //返回数据形式为json
			success: function (result) {
				// alert(JSON.stringify(result))
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = "xxxxx";
				option = {
					color: ["#3398DB"],
					title: {
						text: "本月出勤人数统计",
						left: "center",
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					xAxis: [
						{
							type: "category",
							data: result.daylist,
							axisTick: {
								alignWithLabel: true,
							},
						},
					],
					yAxis: [
						{
							type: "value",
						},
					],
					series: [
						{
							name: "出勤人数",
							type: "bar",
							barWidth: "60%",
							data: result.worklist,
						},
					],
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			},
		});
		$('#teamId1').change(function () {
			var selectTeam = $("#teamId1").val();
			$.ajax({
				type: "post",
				//async : false, //同步执行
				url: BaseServiceUrl + "mobile/attendanceCon/statis.json",
				data: {
					e_id: enterpriseId, //企业ID
					area_id: areaId,
					role_id: roleId,
					a_name: selectTeam
				},
				async: true,
				dataType: "json", //返回数据形式为json
				success: function (result) {
					// alert(JSON.stringify(result))
					var dom = document.getElementById("container");
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					app.title = "xxxxx";
					option = {
						color: ["#3398DB"],
						title: {
							text: "本月出勤人数统计",
							left: "center",
						},
						tooltip: {
							trigger: "axis",
							axisPointer: {
								// 坐标轴指示器，坐标轴触发有效
								type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
							},
						},
						grid: {
							left: "3%",
							right: "4%",
							bottom: "3%",
							containLabel: true,
						},
						xAxis: [
							{
								type: "category",
								data: result.daylist,
								axisTick: {
									alignWithLabel: true,
								},
							},
						],
						yAxis: [
							{
								type: "value",
							},
						],
						series: [
							{
								name: "出勤人数",
								type: "bar",
								barWidth: "60%",
								data: result.worklist,
							},
						],
					};
					if (option && typeof option === "object") {
						myChart.setOption(option, true);
					}
				},
			});
		})
	}
	function setSecond(obj) {
		var val = obj.value;
		if (val == null) {
			api.alert({
				title: '提示',
				msg: '请选择月份'
			});
		} else {
		}
	}
</script>

</html>